<template>
  <div id="ordinary_apply" class="same-change-oldstyle" >
    <div class="ordinary_applywrap">
     <div class="same-head-box" style="border-bottom:0px;padding:0px">
        <div class="saem-seat-box" >
          <div class="saem-seat-left">
            <span>当前位置：</span>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
                  <el-breadcrumb-item>普通水卡</el-breadcrumb-item>
                  <el-breadcrumb-item>水卡开卡</el-breadcrumb-item>
                </el-breadcrumb>
          </div>
          <div class="saem-seat-right">
            <!-- <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button> -->
            <button class="same-search-btns" @click="returnBack">返回</button>
          </div>
        </div>
    </div>
      <form action method="post" class="formwrap">


        <el-row :gutter="40">
          <el-col :span="7">
            <div class="items">
              <span class="lable">用户姓名</span>
              <!-- <input type="text" name="full_name" v-model="full_name" placeholder="请输入姓名" />  -->
              <el-input type="text"  name="full_name" v-model="full_name" placeholder="请输入姓名" ></el-input>
              <span class="icons">*</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="items">
              <span class="lable">手机号码</span>
              <!-- <input type="text" name="tel" v-model="tel" maxlength="11" placeholder="请输入手机号码" /> -->
               <el-input type="number"  name="tel" maxlength="11" v-model="tel" placeholder="请输入手机号码" ></el-input>
              <span class="icons">*</span>
            </div>

          </el-col>
          <el-col :span="7">
            <div class="items">
              <span class="lable">身份证号</span>
              <!-- <input type="text" name="IDcard" v-model="IDcard" placeholder="请输入证件号码" /> -->
              <el-input type="text"  name="IDcard"  v-model="IDcard" placeholder="请输入证件号码" ></el-input>
              <!-- <span class="icons">*</span> -->
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="7">
            <div class="items">
              <span class="lable">水卡卡号</span>
              <!-- <input type="text" name="card_number" v-model="card_number" placeholder="请输入水卡卡号" /> -->
              <el-input type="text"  name="card_number"  v-model="card_number" placeholder="请输入水卡卡号" ></el-input>
              <span class="icons">*</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="items">
              <span class="lable">押金</span>
              <el-select v-model="depositIndex" placeholder="请选择押金"  @change="chooseDeposit">
                <el-option v-for="item in deposit" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <span class="icons">*</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="items">
              <span class="lable">办理状态</span>
              <el-select v-model="valuetype" placeholder="请选择" >
                <el-option v-for="item in selected" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <span class="icons">*</span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="7">
            <div class="items">
              <span class="lable">所属园区</span>
              <el-select v-model="village_name" filterable reserve-keyword placeholder="请选择园区"
                @change="chooseVillage">
                <el-option v-for="(item,index) in villageList" :key="item.id" :label="item.village_name" :value="index">
                </el-option>
              </el-select>
              <!-- <input type="text" name="village_name" v-model="village_name" placeholder="请输入园区名称" /> -->
              <!-- <el-autocomplete class="inline-input" name="village_name" v-model="village_name" :fetch-suggestions="querySearch" placeholder="请输入园区名称" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete> -->
              <span class="icons">*</span>
            </div>
          </el-col>
          <el-col :span="7" v-if="province_name">
            <div class="address-info">{{province_name}}-{{city_name}}-{{area_name}}-{{address}}</div>
          </el-col>

          <el-col :span="7" v-if="province_name">
            <div class="items">
              <span class="lable">详细地址</span>
              <input type="text" name="address_two" v-model="address_two" placeholder="请输入填写详细地址" />
              <span class="icons">*</span>
            </div>
          </el-col>
        </el-row>
        <!-- <div class="items">
          <span class="lable">地址信息</span>
          <input type="text" name="province_name" v-model="province_name" placeholder style="width: 120px" disabled /> -->
        <!--<el-autocomplete v-model="province_name" placeholder="请选择省份" @change="chooseProvince" style='width: 120px;margin-right: 10px'>-->
        <!--<el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.name">-->
        <!--</el-option>-->
        <!--</el-autocomplete>-->
        <!-- <input type="text" name="city_name" v-model="city_name" placeholder style="width: 120px" disabled /> -->
        <!--<el-autocomplete v-model="city_name" placeholder="请选择城市" @change="chooseCity" style='width: 120px;margin-right: 10px'>-->
        <!--<el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.name">-->
        <!--</el-option>-->
        <!--</el-autocomplete>-->
        <!-- <input type="text" name="area_name" v-model="area_name" placeholder style="width: 120px" disabled /> -->
        <!--<el-autocomplete v-model="area_name" placeholder="请选择区县" @change="chooseArea" style='width: 120px;margin-right: 10px'>-->
        <!--<el-option v-for="item in Area" :key="item.id" :label="item.name" :value="item.name">-->
        <!--</el-option>-->
        <!--</el-autocomplete>-->
        <!-- <input type="text" name="address" v-model="address" placeholder style="width: 170px" disabled />
          <input type="text" name="address_two" v-model="address_two" placeholder="门牌号,如：D座12-2"
            style="margin-left: 15px;width: 170px" />
          <span class="icons"></span>
        </div> -->

        <el-row :gutter="40">
          <el-col :span="7">
            <div class="items">
                <span class="lable">充值金额</span>
                <el-select v-model="valueprice" placeholder="请选择"  @change="choosePrice">
                  <el-option v-for="item in templateArr" :key="item.name" :label="item.label" :value="item.name">
                  </el-option>
                </el-select>
                <!--<input style="width:200px!important;" type="number" name="valueprice" v-model="valueprice" placeholder="请输入充值金额" />-->
                <span class="icons">*</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="7">
        <div class="items" v-if="rechargesIndex == -1">
          <span class="lable">其他金额</span>
          <input type="text" name="other_money" v-model="other_money" placeholder="请输入其他充值金额" />
          <span class="icons">*</span>
        </div>
      </el-col>
    </el-row>

        <button type="button" class="subbtn" @click="submitForm()">提交</button>
      </form>
    </div>
  </div>
</template>
<script>
  import { regionDataPlus } from "element-china-area-data";
  export default {
    name: "ordinary_apply",
    data: function () {
      return {
        options: regionDataPlus,
        full_name: locache.get("verification")
          ? locache.get("verification").full_name
          : "", // 姓名
        tel: locache.get("verification") ? locache.get("verification").tel : "", // 电话
        IDcard: locache.get("verification")
          ? locache.get("verification").IDcard
          : "", // 身份证
        address: locache.get("verification")
          ? locache.get("verification").address
          : "", // 地址
        address_two: locache.get("verification")
          ? locache.get("verification").address_two
          : "", // 详细地址
        province_name: locache.get("verification")
          ? locache.get("verification").province_name
          : "", //
        city_name: locache.get("verification")
          ? locache.get("verification").city_name
          : "", //
        area_name: locache.get("verification")
          ? locache.get("verification").area_name
          : "", //
        village_name: locache.get("verification")
          ? locache.get("verification").village_name
          : "", // 园区名字
        card_number: locache.get("verification")
          ? locache.get("verification").card_number
          : "", // 水卡卡号
        deposit: locache.get("verification")
          ? locache.get("verification").deposit
          : [], // 押金
        depositIndex: locache.get("verification")
          ? locache.get("verification").depositIndex
          : '',
        rechargesIndex: locache.get("verification")
          ? locache.get("verification").rechargesIndex
          : '', // 是否是其他金额选项
        other_money: locache.get("verification")
          ? locache.get("verification").other_money
          : '', // 其他金额
        selected: [
          {
            value: "已领卡",
            label: "已领卡"
          },
          {
            value: "未领卡",
            label: "未领卡"
          }
          // ,{
          //   value: '缺水卡',
          //   label: '缺水卡'
          // }
        ],
        selectedPrice: [
          {
            value: "0",
            label: "0"
          },
          {
            value: "50",
            label: "50"
          },
          {
            value: "100",
            label: "100"
          },
          {
            value: "200",
            label: "200"
          }
        ],
        valuetype: locache.get("verification")
          ? locache.get("verification").audit_status
          : "",
        valueprice:  locache.get('verification')?locache.get('verification').valueprice:'',
        // 三级联动
        Province: [],
        City: [],
        Area: [],
        province_id: locache.get('verification')?locache.get('verification').province_id:'',
        city_id: locache.get('verification')?locache.get('verification').city_id:'',
        area_id:locache.get('verification')?locache.get('verification').area_id:'',
        state2: "",
        give: locache.get('verification')?locache.get('verification').give_money:'',
        recharges: locache.get('verification')?locache.get('verification').recharge:'',
        // rechargesIndex: "",
        // other_money: "",
        templateArr: [],
        list_village: [], //获取园区列表
        villageList: [],
        loading1: false //加载动画
      };
    },
    // 初始化运行
    created: function () {
      console.log('执行需要返回的文件',locache.get("verification"));
      this.remoteMethod();
      this.getProvince(); // 获取省地址
      this.cardDeposit();
      this.getTemplate();
    },
    inject: ['reload'],
    methods: {
        RefreshFun(){
            // 调用reload方法，刷新整个页面
            this.reload()
        },
        //返回
        returnBack(){
            this.$router.back(-1);
        },
      chooseVillage(i) {
        this.village_id = this.villageList[i].id;
        this.province_id = this.villageList[i].province;
        this.city_id = this.villageList[i].city;
        this.area_id = this.villageList[i].area;
        this.province_name = this.villageList[i].province_name;
        this.city_name = this.villageList[i].city_name;
        this.area_name = this.villageList[i].area_name;
        this.address = this.villageList[i].address;
        this.village_name = this.villageList[i].village_name;
      },

      //搜索园区
      remoteMethod(query) {
        //console.log(query);
        var that = this;
        // Ajax请求
        that.$post({
          url: "Partner/WaterCard/getPartnerVillage",
          data: {
            village_name: query,
            row: 999999,
            page: 1,
            sell_water_status: "",
            template_status: ""
          },
          success: data => {
            //console.log(data);
            if (data.code == 1000) {
              that.villageList = data.data;
              //that.$message.success(data.message);
              //console.log()
            } else {
              that.$message.error(data.message);
            }
          }
        });
      },

      querySearch(queryString, cb) {
        var that = this;
        var n_rray = [];
        that.$post({
          url: "Partner/WaterCard/get_village",
          data: { village_name: queryString },
          success: data => {
            if (data.code == 1000) {
              var danew = data.data;
              that.list_village = danew;
              for (var i = 0; i < danew.length; i++) {
                var obj = {};
                obj.value = danew[i].village_name;
                obj.address = danew[i].address;
                n_rray.push(obj);
              }
              // 调用 callback 返回建议列表的数据
              cb(n_rray);
            } else {
              this.$message.error(data.message);
            }
          }
        });
      },
      createFilter(queryString) {
        return restaurant => {
          return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
            0
          );
        };
      },
      handleSelect(item) {
        var that = this;
        that.village_name = item.value;
        var list_village = that.list_village;
        var ind_i = "";
        for (var i = 0; i < list_village.length; i++) {
          if (list_village[i].village_name == item.value) {
            ind_i = i;
          }
        }

        that.province_id = list_village[ind_i].province;
        that.address = list_village[ind_i].address;
        that.province_name = list_village[ind_i].province_name;
        // console.log('省',that.province_id)
        //获取城市
        that.$post({
          url: "Common/Common/getCity",
          data: { id: that.province_id },
          success: data => {
            if (data.code == 1000) {
              that.City = data.data;
              that.city_id = list_village[ind_i].city;
              that.city_name = list_village[ind_i].city_name;
            } else {
              this.$message.error(data.message);
            }
          }
        });
        //获取区域
        that.$post({
          url: "Common/Common/getArea",
          data: { id: list_village[ind_i].city },
          success: data => {
            if (data.code == 1000) {
              that.Area = data.data;
              that.area_id = list_village[ind_i].area;
              that.area_name = list_village[ind_i].area_name;
            } else {
              this.$message.error(data.message);
            }
          }
        });
      },
      //获取充值模板
      getTemplate: function () {
        var that = this;
        that.$post({
          url: "Partner/Village/partnerRecharge",
          data: {},
          success: res => {
            //console.log(res)
            if (res.code == 1000) {
              var templateArr = [];
              var template = res.data.template;
              template.money_0 = {};
              template.money_0.name = "其它金额(无赠送)";
              template.money_0.recharge = "";
              template.money_0.give = 0;
              template.money_1.name =
                "充值" +
                template.money_1.recharge +
                "元赠送" +
                template.money_1.give +
                "元";
              template.money_2.name =
                "充值" +
                template.money_2.recharge +
                "元赠送" +
                template.money_2.give +
                "元";
              template.money_3.name =
                "充值" +
                template.money_3.recharge +
                "元赠送" +
                template.money_3.give +
                "元";
              template.money_4.name =
                "充值" +
                template.money_4.recharge +
                "元赠送" +
                template.money_4.give +
                "元";
              template.money_5.name =
                "充值" +
                template.money_5.recharge +
                "元赠送" +
                template.money_5.give +
                "元";
              template.money_6.name =
                "充值" +
                template.money_6.recharge +
                "元赠送" +
                template.money_6.give +
                "元";
              template.money_7.name =
                "充值" +
                template.money_7.recharge +
                "元赠送" +
                template.money_7.give +
                "元";

              templateArr.push(template.money_0);
              if (template.money_1.recharge != "") {
                templateArr.push(template.money_1);
              }
              if (template.money_2.recharge != "") {
                templateArr.push(template.money_2);
              }
              if (template.money_3.recharge != "") {
                templateArr.push(template.money_3);
              }
              if (template.money_4.recharge != "") {
                templateArr.push(template.money_4);
              }
              if (template.money_5.recharge != "") {
                templateArr.push(template.money_5);
              }
              if (template.money_6.recharge != "") {
                templateArr.push(template.money_6);
              }
              if (template.money_7.recharge != "") {
                templateArr.push(template.money_7);
              }
              console.log(templateArr);
              that.templateArr = templateArr;
            }
          }
        });
      },
      // 三级联动-省
      cardDeposit() {
        var that = this;
        this.$post({
          url: "Common/Common/cardDeposit",
          data: {},
          success: data => {
            that.deposit = data.data;
          }
        });
      },
      getProvince() {
        this.$post({
          url: "Common/Common/getProvince",
          data: {},
          success: data => {
            this.Province = data.data;
          }
        });
      },
      // 三级联动-市
      getCity(id) {
        this.$post({
          url: "Common/Common/getCity",
          data: { id: id },
          success: data => {
            this.City = data.data;
          }
        });
      },
      // 三级联动-区/县
      getArea(id) {
        this.$post({
          url: "Common/Common/getArea",
          data: { id: id },
          success: data => {
            this.Area = data.data;
          }
        });
      },
      // 省改变
      chooseProvince(val) {
        var that = this;
        // 循环获取选中的地址
        $.each(that.Province, function (k, v) {
          if (v.id == val) {
            that.province_name = v.name;
          }
        });
        this.getCity(val);
        this.city_id = "";
        this.area_id = "";
      },
      // 市改变
      chooseCity(val) {
        var that = this;
        // 循环获取选中的地址
        $.each(that.City, function (k, v) {
          if (v.id == val) {
            that.city_name = v.name;
          }
        });
        this.getArea(val);
        this.area_id = "";
      },
      // 区/县改变
      chooseArea(val) {
        var that = this;
        // 循环获取选中的地址
        $.each(that.Area, function (k, v) {
          if (v.id == val) {
            that.area_name = v.name;
          }
        });
        this.baidu = that.province_name + that.city_name + that.area_name;
      },
      handleChange(value) { },

      chooseDeposit(val) {
        var that = this;
        that.depositIndex = val;
      },
      choosePrice(val) {
        var that = this;
        for (var i = 0; i < that.templateArr.length; i++) {
          if (that.templateArr[i].name == val) {

            that.give = that.templateArr[i].give;
            that.recharges = that.templateArr[i].recharge;
              // console.log('i',i,val,that.give,that.recharges);
          }
        }
        if (that.recharges == "") {
          that.rechargesIndex = -1;
        } else {
          that.rechargesIndex = 0;
        }
      },
      // 水卡申请提交
      submitForm() {
        var that = this;
        var full_name = that.full_name; // 姓名
        var tel = that.tel; // 电话
        var IDcard = that.IDcard; // 身份证
        var province = that.province_id; // 省
        var city = that.city_id; // 市
        var area = that.area_id; // 区
        var province_name = that.province_name; // 省
        var city_name = that.city_name; // 市
        var area_name = that.area_name; // 区
        var address = that.address; // 地址
        var address_two = that.address_two; // 地址
        var village_name = that.village_name; // 园区名字
        var card_number = that.card_number; // 水卡卡号
        var valueprice = that.valueprice; //充值金额
        var recharges = that.recharges; //充值金额
        var give = that.give; //充值金额
        var deposit = that.deposit; // 押金
        var depositIndex=that.depositIndex;
        var audit_status = that.valuetype; // 办理状态
        // 判断数据是否为空
        if (full_name == "") {
          this.$message.error("用户姓名不能为空");
          return false;
        }
        //       else if (tel == '') {
        //   this.$message.error('电话号码不能为空');
        //   return false;
        // }
        // if(IDcard==''){
        //  this.$message.error('身份证号不能为空');
        //  return false;
        // }
        // } else if (province == '') {
        //   this.$message.error('省分信息不能为空');
        //   return false;
        // } else if (city == '') {
        //   this.$message.error('城市信息不能为空');
        //   return false;
        // } else if (area == '') {
        //   this.$message.error('区域信息不能为空');
        //   return false;
        // }
        if (village_name == '') {
          this.$message.error('园区名称不能为空');
          return false;
        }
        if(address_two==''){
          this.$message.error('详细地址不能为空');
          return false;
        }
        // else if (card_number == '') {
        //   this.$message.error('水卡信息不能为空');
        //   return false;} else
        if (tel == "") {
          this.$message.error("电话号码不能为空");
          return false;
        } else if (card_number == "") {
          this.$message.error("水卡卡号不能为空");
          return false;
        } else if (valueprice == "") {
          this.$message.error("充值金额不能为空");
          return false;
        } else if (depositIndex === "") {
          this.$message.error("押金不能为空");
          return false;
        } else if (audit_status == '') {
          this.$message.error('办理状态不能为空');
          return false;
        }
        // else if (that.rechargesIndex === ''){
        //   this.$message.error("充值金额不能为空");
        //   return false;
        // }
        if (that.rechargesIndex == -1) {
          if (that.other_money == '') {
            this.$message.error("请输入其他充值金额");
            return false;
          }
          if (that.other_money < 0) {
            this.$message.error("请输入正确的其他充值金额");
            return false;
          }
          // recharges = that.other_money;
        }

        var obj_data = {
          full_name: full_name,
          tel: tel,
          IDcard: IDcard,
          province_id:that.province_id,
          city_id:that.city_id,
          area_id:that.area_id,
          province: province,
          city: city,
          area: area,
          village_name: village_name,
          address: address,
          province_name: province_name,
          city_name: city_name,
          area_name: area_name,
          address_two: address_two,
          card_number: card_number,
          valueprice: valueprice,
          give_money: give,
          other_money: that.other_money,
          deposit: deposit,
          audit_status: audit_status,
          recharge: that.recharges,
          depositIndex:depositIndex,
          rechargesIndex: that.rechargesIndex
        };
        console.log('>>>>>>>>>>',obj_data);
        locache.set("verification", obj_data);
        this.$router.push({ path: "/verification" });
      }
    },
    mounted() { },
    destroyed(){
      //console.log('销毁创建实例')
    },
    watch: {}
  };
</script>
<style type="text/css">
  /* .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  } */

  #ordinary_apply .ordinary_applywrap {
    padding: 0 42px;
  }

  .topBreadcrumb {
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #cdcdcd;
  }

  .topBreadcrumb .el-breadcrumb__inner {
    font-size: 16px;
    font-weight: normal;
  }

  #ordinary_apply .items {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }

  #ordinary_apply .items .lable {
    width: 70px;
    font-weight: bold;
  }

  #ordinary_apply .items .icons {
    /*color: #9e383b;*/
    /*margin-left: 13px;*/
    font-style: normal;
    margin-left: 5px;
    color:#FF6565;
    display: block;
    width: 10px;
  }

  #ordinary_apply .items input {
    border: 1px solid #cccccc;
    padding: 13px 9px;
    border-radius: 5px;
    flex: 1;
  }

  #ordinary_apply .formwrap {
    margin-top: 30px;
  }

  #ordinary_apply .formwrap .el-input__inner {
    border: 1px solid #cccccc;
    border-radius: 5px;
    height: 43px;
    font-size: 14px;
  }
   #ordinary_apply .formwrap  .el-input{
         width:210px;
  }
  #ordinary_apply  .items_bot .el-input__inner {
    border: 1px solid #cccccc;
    border-radius: 5px;
    height: 43px;
    font-size: 14px;
  }

  #ordinary_apply .items_bot {
    display: flex;
    align-items: center;
    margin-right: 60px;
  }

  #ordinary_apply .items_bot input {
    width: 100px !important;
  }

  #ordinary_apply .items_bot .el-input {
    width: 100px;
  }

  #ordinary_apply .items_bot select {
    border: 1px solid #cccccc;
    padding: 13px 9px;
    border-radius: 5px;
  }

  #ordinary_apply .subbtn {
    background-color: #2c5586;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    padding: 13px 25px;
    cursor: pointer;
  }

  #ordinary_apply .el-input__inner {
    height: 43px;
  }

  .address-info {
    line-height: 40px;
  }
  #ordinary_apply .topBreadcrumb{
    margin-left: 0;
  }
</style>
